<script setup>
import { ref, reactive } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import $api from '@/api/api'
import { useAllDataStore } from '@/stores/index'
const store = useAllDataStore()
import { onMounted } from 'vue'

// 修改密码表单数据
const passwordForm = reactive({
  password: '' // 新密码
})
const passwordLoading = ref(false)

// 个人信息表单数据
const studentForm = reactive({
  // id: store.state.id,
  // sno: '',
  username: '',
  // type: '',
  collage: '',
  major: '',
  birth: '',
  originPlace: ''
})

// 图书证表单数据
const libCardForm = reactive({
  sno: '',
  sname: '',
  type: '',
  collage: '',
  major: '',
  birth: '',
  originPlace: ''
})

// 控制对话框显示
const newLibCardDialogVisible = ref(false)
const renewLibCardDialogVisible = ref(false)
// 控制图书证挂失状态
const isLost = ref(false)
const lostLoading = ref(false)
const cancelLoading = ref(false)

// 修改密码
const handleUpdatePassword = async () => {
  passwordLoading.value = true
  try {
    await $api.updateStudentPassword(passwordForm)
    ElMessage.success('密码修改成功')
    passwordForm.password = ''
  } catch (error) {
    ElMessage.error('密码修改失败')
  }
  passwordLoading.value = false
}

// 修改个人信息
const handleUpdateStudent = async () => {
  try {
    await $api.updateStudent(studentForm)
    ElMessage.success('个人信息修改成功')
  } catch (error) {
    ElMessage.error('个人信息修改失败')
  }
}

// 新办图书证
const handleNewLibCard = async () => {
  try {
    await $api.newLibCard(libCardForm)
    ElMessage.success('图书证申请成功')
    newLibCardDialogVisible.value = false
  } catch (error) {
    ElMessage.error('图书证申请失败')
  }
}

// 挂失/取消挂失图书证
const handleLostLibCard = async () => {
  lostLoading.value = true
  try {
    await ElMessageBox.confirm(
      isLost.value ? '确定要取消挂失图书证吗？' : '确定要挂失图书证吗？',
      '提示',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
    )
    await $api.lostLibCard()
    isLost.value = !isLost.value
    ElMessage.success(isLost.value ? '图书证挂失成功' : '图书证取消挂失成功')
  } catch (error) {
    if (error !== 'cancel') ElMessage.error(isLost.value ? '取消挂失失败' : '挂失失败')
  }
  lostLoading.value = false
}

// 补办图书证
const handleRenewLibCard = async () => {
  try {
    await $api.renewLibCard(libCardForm)
    ElMessage.success('图书证补办成功')
    renewLibCardDialogVisible.value = false
  } catch (error) {
    ElMessage.error('图书证补办失败')
  }
}

// 注销图书证
const handleCancelLibCard = async () => {
  cancelLoading.value = true
  try {
    await ElMessageBox.confirm('确定要注销图书证吗？此操作不可恢复！', '警告', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    })
    await $api.canceLibCard()
    ElMessage.success('图书证注销成功')
  } catch (error) {
    if (error !== 'cancel') ElMessage.error('图书证注销失败')
  }
  cancelLoading.value = false
}

// 在组件挂载后请求学生信息
onMounted(async () => {
  try {
    const res = await $api.getStudentInfo()
    if (res.code === 1) {
      Object.assign(studentForm, res.data)
    } else {
      ElMessage.error('获取学生信息失败')
    }
  } catch (error) {
    ElMessage.error('请求失败，请重试')
  }
})
</script>

<template>
  <div class="user-profile">
    <div class="profile-header">
      <img class="avatar" src="@/assets/images/avatar.png" alt="avatar" />
      <div>
        <h2>{{ studentForm.username || '用户' }}</h2>
        <p>欢迎来到个人中心</p>
      </div>
    </div>
    <div class="profile-container">
      <!-- 左侧个人信息 -->
      <el-card class="profile-card">
        <template #header>
          <div class="card-header">
            <h2>个人信息</h2>
            <el-button type="primary" @click="handleUpdateStudent">保存修改</el-button>
          </div>
        </template>

        <el-form :model="studentForm" label-position="top">
          <div class="form-grid">
            <!-- <el-form-item label="学号">
              <el-input v-model="studentForm.sno" placeholder="请输入学号" readonly />
            </el-form-item> -->
            <el-form-item label="姓名">
              <el-input v-model="studentForm.username" placeholder="请输入姓名" />
            </el-form-item>
            <!-- <el-form-item label="类型">
              <el-input v-model="studentForm.type" placeholder="请输入类型" />
            </el-form-item> -->
            <el-form-item label="学院">
              <el-input v-model="studentForm.collage" placeholder="请输入学院" />
            </el-form-item>
            <el-form-item label="专业">
              <el-input v-model="studentForm.major" placeholder="请输入专业" />
            </el-form-item>
            <el-form-item label="出生日期">
              <el-date-picker v-model="studentForm.birth" type="date" style="width: 100%" placeholder="请选择出生日期" />
            </el-form-item>
            <el-form-item label="籍贯">
              <el-input v-model="studentForm.originPlace" placeholder="请输入籍贯" />
            </el-form-item>
          </div>
        </el-form>
      </el-card>

      <!-- 右侧内容 -->
      <div class="right-section">
        <!-- 修改密码卡片 -->
        <el-card class="password-card">
          <template #header>
            <div class="card-header">
              <h2>修改密码</h2>
            </div>
          </template>

          <el-form :model="passwordForm" label-position="top">
            <!-- <el-form-item label="学号">
              <el-input v-model="passwordForm.username" placeholder="请输入学号" />
            </el-form-item> -->
            <el-form-item label="新密码">
              <el-input v-model="passwordForm.password" type="password" show-password placeholder="请输入新密码" />
            </el-form-item>
            <el-form-item>
              <el-button :loading="passwordLoading" type="primary" @click="handleUpdatePassword" style="width: 100%">确认修改</el-button>
            </el-form-item>
          </el-form>
        </el-card>

        <!-- 图书证操作卡片 -->
        <el-card class="library-card">
          <template #header>
            <div class="card-header">
              <h2>图书证操作</h2>
            </div>
          </template>

          <div class="library-buttons">
            <el-button type="success" @click="newLibCardDialogVisible = true">
              <el-icon><Plus /></el-icon>新办图书证
            </el-button>
            <el-button :type="isLost ? 'info' : 'warning'" :loading="lostLoading" @click="handleLostLibCard">
              <el-icon><Warning /></el-icon>{{ isLost ? '取消挂失' : '图书证挂失' }}
            </el-button>
            <el-button type="info" @click="renewLibCardDialogVisible = true">
              <el-icon><Refresh /></el-icon>图书证补办
            </el-button>
            <el-button type="danger" :loading="cancelLoading" @click="handleCancelLibCard">
              <el-icon><Delete /></el-icon>图书证注销
            </el-button>
          </div>
        </el-card>
      </div>
    </div>

    <!-- 新办图书证对话框 -->
    <el-dialog v-model="newLibCardDialogVisible" title="新办图书证" width="50%">
      <el-form :model="libCardForm" label-width="100px">
        <el-form-item label="学号">
          <el-input v-model="libCardForm.sno" placeholder="请输入学号" />
        </el-form-item>
        <el-form-item label="姓名">
          <el-input v-model="libCardForm.sname" placeholder="请输入姓名" />
        </el-form-item>
        <el-form-item label="类型">
          <el-input v-model="libCardForm.type" placeholder="请输入类型" />
        </el-form-item>
        <el-form-item label="学院">
          <el-input v-model="libCardForm.collage" placeholder="请输入学院" />
        </el-form-item>
        <el-form-item label="专业">
          <el-input v-model="libCardForm.major" placeholder="请输入专业" />
        </el-form-item>
        <el-form-item label="出生日期">
          <el-date-picker v-model="libCardForm.birth" type="date" placeholder="请选择出生日期" />
        </el-form-item>
        <el-form-item label="籍贯">
          <el-input v-model="libCardForm.originPlace" placeholder="请输入籍贯" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="newLibCardDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleNewLibCard">确认</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 补办图书证对话框 -->
    <el-dialog v-model="renewLibCardDialogVisible" title="补办图书证" width="50%">
      <el-form :model="libCardForm" label-width="100px">
        <el-form-item label="学号">
          <el-input v-model="libCardForm.sno" placeholder="请输入学号" />
        </el-form-item>
        <el-form-item label="姓名">
          <el-input v-model="libCardForm.sname" placeholder="请输入姓名" />
        </el-form-item>
        <el-form-item label="类型">
          <el-input v-model="libCardForm.type" placeholder="请输入类型" />
        </el-form-item>
        <el-form-item label="学院">
          <el-input v-model="libCardForm.collage" placeholder="请输入学院" />
        </el-form-item>
        <el-form-item label="专业">
          <el-input v-model="libCardForm.major" placeholder="请输入专业" />
        </el-form-item>
        <el-form-item label="出生日期">
          <el-date-picker v-model="libCardForm.birth" type="date" placeholder="请选择出生日期" />
        </el-form-item>
        <el-form-item label="籍贯">
          <el-input v-model="libCardForm.originPlace" placeholder="请输入籍贯" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="renewLibCardDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleRenewLibCard">确认</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped>
.user-profile {
  padding: 20px;
  background: linear-gradient(120deg, #e4ecfb 0%, #f5f7fa 100%);
  min-height: 100vh;
}

.profile-header {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 24px;
}
.avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 2px solid #eee;
}

.profile-container {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 20px;
}

.profile-card {
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  padding: 16px 24px 24px 24px;
}

.right-section {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.password-card,
.library-card {
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  padding: 16px 24px 24px 24px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.card-header h2 {
  margin: 0;
  font-size: 18px;
  color: #303133;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.library-buttons {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
}

.library-buttons .el-button {
  width: 100%;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .profile-container {
    grid-template-columns: 1fr;
  }

  .form-grid {
    grid-template-columns: 1fr;
  }

  .library-buttons {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 600px) {
  .profile-header {
    flex-direction: column;
    align-items: flex-start;
  }
  .avatar {
    margin-bottom: 10px;
  }
  .profile-card, .password-card, .library-card {
    padding: 10px 8px 16px 8px;
  }
}
</style>
